<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/icons-extra.css" rel="stylesheet" />
		<style>
			.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable {
			background-color: #EC971F;
		}
		.mui-scroll-wrapper{
			background-color: #EFEFF4;
		}
		.offCanva-header img{
			border-radius: 80px;
		}
		.mui-icon{
			font-size: 16px;
		}
		.mui-icon-extra {
			font-size: 16px;
		}
	</style>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			mui.init({
				pullRefresh: {
					container: "#offCanvasContentScroll", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#EC971F', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '50px', //可选,默认50px.下拉刷新控件的高度,
						range: '100px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
						auto: true, //可选,默认false.首次加载自动上拉刷新一次
						callback: pullDownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						height:50,//可选.默认50.触发上拉加载拖动距离
						auto:true,//可选,默认false.自动上拉加载一次
						contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullUpRefresh
					}
				}
			});
			function pullDownRefresh() {
				setTimeout(function() {
					var table = document.querySelector(".jiazai");
					for (var i = 0; i < 2; i++) {
						var div = document.createElement("div");
						div.className = "mui-card";
						var str = "";
						str += '	<div class="mui-card-header mui-card-media">';
						str += '		<img src="images/discover/touxiang1.jpg" />';
						str += '		<div class="mui-media-body">';
						str += '			好味源米粉';
						str += '			<p>发表于 2016-06-30 15:30</p>';
						str += '		</div>';
						str += '	</div>'
						str += '	<div class="mui-card-content">';
						str += '		<p style="color: black; margin: 10px 20px;">招一名学生工，课少无晚自习优先。</p>';
						str += '	</div>';
						str += '	<div class="mui-card-footer">';
						str += '<span class="mui-icon-extra mui-icon-extra-like">赞</span>';
						str +='<span class="mui-icon-extra mui-icon-extra-comment">评论</span>';
						str += '<span class="mui-icon mui-icon-redo">转发</span>';
						str += ' 	</div>';
						div.innerHTML = str;
						table.insertBefore(div, table.firstChild);
					}
					mui('#offCanvasContentScroll').pullRefresh().endPulldownToRefresh();
				}, 1500);
			}

			function pullUpRefresh() {
				setTimeout(function() {
					var table = document.querySelector(".jiazai");
					for (var i = 0; i < 2; i++) {
						var div = document.createElement("div");
						div.className = "mui-card";
						var str = "";
						str += '	<div class="mui-card-header mui-card-media">';
						str += '		<img src="images/discover/touxiang1.jpg" />';
						str += '		<div class="mui-media-body">';
						str += '			好味源米粉';
						str += '			<p>发表于 2016-06-30 15:30</p>';
						str += '		</div>';
						str += '	</div>'
						str += '	<div class="mui-card-content">';
						str += '		<p style="color: black; margin: 10px 20px;">招一名学生工，课少无晚自习优先。</p>';
						str += '	</div>';
						str += '	<div class="mui-card-footer">';
						str += '<span class="mui-icon-extra mui-icon-extra-like">赞</span>';
						str +='<span class="mui-icon-extra mui-icon-extra-comment">评论</span>';
						str += '<span class="mui-icon mui-icon-redo">转发</span>';
						str += ' 	</div>';
						div.innerHTML = str;
						table.appendChild(div);
					}
					mui('#offCanvasContentScroll').pullRefresh().endPullupToRefresh();
				}, 1500);
			}
		</script>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
			<!-- 侧滑菜单部分 -->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-grid-view" style="margin-top: 0px; background-color: #EC971F;">
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#" class="offCanva-header">
									<img class="mui-media-object" src="images/home/touxiang_moren.jpg" style="width: 110px; height: 110px;">
									<div style="color: white;font-size: 20px; margin-top: 10px;">点击头像登录</div>
								</a>
							</li>
						</ul>
						<div class="offCanva-content" style="background-color: #EFEFF4; padding-top: 20px; padding-bottom: 90px;">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										我的钱包
									</a>
								</li>
							</ul>
							<div id="" style="height: 15px;"></div>
							<ul class="mui-table-view" class="background-color: #EFEFF4;">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										最近浏览
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										收藏
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										评价
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										关于我们
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										联系客服
									</a>
								</li>
							</ul>
							<div id="" style="height: 15px;"></div>
							<ul class="mui-table-view" class="background-color: #EFEFF4;">
								<li class="mui-table-view-cell" id="setting">
									<a class="mui-navigate-right">
										设置
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</aside>
			<!-- 主界面部分 -->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav" style="background-color: #EC971F;">
					<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" style="color: white;"></a>
					<h1 class="mui-title" style="color: white;">发现</h1>
				</header>
				<!-- CONTENT -->
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="jiazai">
						<div class="mui-card">
							<div class="mui-card-header mui-card-media">
								<img src="images/discover/touxiang1.jpg" />
								<div class="mui-media-body">
									好味源米粉
									<p>发表于 2016-06-30 15:30</p>
								</div>
							</div>
							<div class="mui-card-content">
								<p style="color: black; margin: 10px 20px;">招一名学生工，课少无晚自习优先。</p>
							</div>
							<div class="mui-card-footer">
								<span class="mui-icon-extra mui-icon-extra-like">赞</span>
								<span class="mui-icon-extra mui-icon-extra-comment">评论</span>
								<span class="mui-icon mui-icon-redo">转发</span>
							</div>
						</div>
						<div class="mui-card">
							<div class="mui-card-header mui-card-media">
								<img src="images/discover/2.jpg" />
								<div class="mui-media-body">
									小M
									<p>发表于 2016-06-30 15:30</p>
								</div>
							</div>
							<div class="mui-card-content">
								<p style="color: black; margin: 10px 20px;">今日份试吃，学一食堂一楼鸭血粉丝汤，很赞哦！！</p>
							</div>
							<div class="mui-card-footer">
								<span class="mui-icon-extra mui-icon-extra-like">赞</span>
								<span class="mui-icon-extra mui-icon-extra-comment">评论</span>
								<span class="mui-icon mui-icon-redo">转发</span>
							</div>
						</div>
						<div class="mui-card">
							<div class="mui-card-header mui-card-media">
								<img src="images/discover/touxiang1.jpg" />
								<div class="mui-media-body">
									小白
									<p>发表于 2016-06-30 15:30</p>
								</div>
							</div>
							<div class="mui-card-content">
								<p style="color: black; margin: 10px 20px;">招一名学生工，课少无晚自习优先。</p>
							</div>
							<div class="mui-card-footer">
								<span class="mui-icon-extra mui-icon-extra-like">赞</span>
								<span class="mui-icon-extra mui-icon-extra-comment">评论</span>
								<span class="mui-icon mui-icon-redo">转发</span>
							</div>
						</div>
						<div class="mui-card">
							<div class="mui-card-header mui-card-media">
								<img src="images/discover/touxiang1.jpg" />
								<div class="mui-media-body">
									小M
									<p>发表于 2016-06-30 15:30</p>
								</div>
							</div>
							<div class="mui-card-content">
								<p style="color: black; margin: 10px 20px;">招一名学生工，课少无晚自习优先。</p>
							</div>
							<div class="mui-card-footer">
								<span class="mui-icon-extra mui-icon-extra-like">赞</span>
								<span class="mui-icon-extra mui-icon-extra-comment">评论</span>
								<span class="mui-icon mui-icon-redo">转发</span>
							</div>
						</div>
						<div class="mui-card">
							<div class="mui-card-header mui-card-media">
								<img src="images/discover/touxiang1.jpg" />
								<div class="mui-media-body">
									小M
									<p>发表于 2016-06-30 15:30</p>
								</div>
							</div>
							<div class="mui-card-content">
								<p style="color: black; margin: 10px 20px;">招一名学生工，课少无晚自习优先。</p>
							</div>
							<div class="mui-card-footer">
								<span class="mui-icon-extra mui-icon-extra-like">赞</span>
								<span class="mui-icon-extra mui-icon-extra-comment">评论</span>
								<span class="mui-icon mui-icon-redo">转发</span>/
							</div>
						</div>
						</div>
					</div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script type="text/javascript">
			// 侧滑菜单
			//侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			//主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			//菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");
			if (!mui.os.android) {
				var spans = document.querySelectorAll('.android-only');
				for (var i = 0, len = spans.length; i < len; i++) {
					spans[i].style.display = "none";
				}
			}
			//移动效果是否为整体移动
			var moveTogether = false;
			//主界面和侧滑菜单界面均支持区域滚动；
			//mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			//实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
		</script>
	</body>
</html>
